<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="./css/header.css" />
    <script src="./js/jquery.js"></script>
    <script src="./js/bootstrap.js"></script>
    <title>Document</title>
    <style>
       #mainer{
        min-height: calc(100vh - 170px);
        width:80%;
        margin: auto;
      }
      .title{
        text-align: center;
      }
      .time{
        text-align: center;
        font-size: 15px;
        opacity: 0.5;
      }
      .thumbnail .panel-img{
      height:180px;
      }
      .thumbnail .panel-caption{
        height:200px;
        overflow: hidden;
      }
      .thumbnail .panel-caption a{
        color:#00BFFF;
        font-size: 20px;
      }
      .thumbnail .panel-caption a:hover{
        text-decoration: none;;
      }
    </style>
  </head>
  <body>
    <div id="bg">
      <div id="header"></div>
      <div id="mainer">
        <div id="info">
      <h3 class="title">这是标题</h3>
      <h4 class="time">这是时间</h4>
        <div id="content">
          这是内容
        </div>
      </div>
        <div id="recommend">
          <div class="page-header" style="margin-top:15px;color:#00BFFF"><span class="glyphicon glyphicon-star"></span>更多新闻</div>
          <div id="recombox" class="row">
            <div class="col-sm-6 col-md-4">
              <div class="thumbnail">
                <img class="panel-img" src="${item.img}" alt="..." />
                <div class="caption panel-caption">
                  <h3>${item.title}</h3>
                  <div><a href='info.html?id=${item._id}'>${item.content}</a></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div id="footer"></div>
    </div>
    <script>
      //格式化时间
      function formatDate(item){
        let time = new Date(item);
            let y = time.getFullYear();
            let m = (time.getMonth()+1).toString().padStart(2,'0');
            let d = time.getDate().toString().padStart(2,'0');
            item = y+'-'+m+'-'+d;
            return item;
      }
      $(function () {
        $("#header").load("./header.html");
        $("#footer").load("./footer.html");
        var id=document.location.search.split("=")[1]
        $.ajax({
          type:'get',
          url:'/news/info?id='+id,
          success:res=>{
            res.data.date = formatDate(res.data.date)
            var html = `
            <h3 class="title">${res.data.title}</h3>
      <h4 class="time">时间：${res.data.date}</h4>
        <div id="content">
          ${res.data.content}
        </div>
            `
            $("#info").html(html)
          },
          error:(xhr,status,error)=>{
            console.log('出错了',error)
          }
        })
        $.ajax({
          type:'get',
          url:'/news/more',
          success:res=>{
            var html = '';
            res.data.forEach(item => {
              html+=` <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
              <img class="panel-img" src="${item.img}" alt="图片" />
              <div class="caption panel-caption">
                <h3 style="text-align:center"><a href='info.html?id=${item._id}'>${item.title}</a></h3>
                <div>${item.content}</div>
              </div>
            </div>
          </div>`
            });
            $("#recombox").html(html)
          },
          error:(xhr,status,error)=>{
            console.log('出错了',error)
          }
        })
      });
    </script>
  </body>
</html>
